<template>
  <div class="container">
    <h1 class="text-center">标签</h1>
    <hr />
    <el-input v-model.trim="setag" placeholder="输入你想搜索的内容" size="normal" clearable ></el-input>
  <hr />
    <div class="grid-3_xs-1_sm-2_md-2" v-if="tags.length">
      <div
        v-for="(tag, index) in changgetags"
        :key="index"
        class="col"
      >
        <router-link :to="`/tags/${tag.name}`">
          <vs-card
            type="3"
            class="center"
          >
            <template #title>
              <h3>{{ tag.name }}</h3>
            </template>
            <template #text>
              <p>
                {{ tag.posts.length }} 篇文章
              </p>
            </template>
          </vs-card>
        </router-link>
      </div>
    </div>
    <Nothing v-else />
  </div>
</template>

<script>
import Nothing from '@/components/Nothing.vue'

export default {
  name: 'ViewTags',
  data () {
    return {
      setag: ''
    }
  },
  methods: {
  },
  mounted () {
    this.changeTitle('Tags')
    // console.log(this.tags)
  },
  created () {
  },
  components: {
    Nothing
  },
  computed: {
    changgetags () {
      return this.tags.filter(el => el.name.includes(this.setag))
    }
  }
}
</script>
